<template>
  <div class="app-container">
    <el-row style="text-align: center;">
      <el-col>
        <img style="width: 50px; height: 50px; vertical-align: middle;" :src="img" alt="Logo">
        <span
          style="display: inline-block; height: 50px; line-height: 50px; vertical-align: middle; margin-left: 10px; font-size: 28px;font-weight: bold;">
          工业废气排放智能监控系统
        </span>
      </el-col>
    </el-row>

    <!-- Introduction Section -->
    <el-row>
      <el-card shadow="hover">
        <div slot="header" class="card-header">系统简介</div>
        <el-row :gutter="20" type="flex" align="middle">
          <el-col :span="12">
            <div class="card-content">
              <p>
                在支撑国民经济的石化产业中，火炬作为必备安全保障设备，具有预防检测重大事故、保障安全生产、防止毒害气体泄漏等重要作用。在石化企业中，火炬通过消耗大量水、电能源点燃石化生产过程中的有毒有害气体，实现尾气洁净排放。然而，目前主流基于人眼观测尾气监控的方法存在<span
                  style="font-weight: bold;color: #f56c6c;">精度低、实时性差</span>等缺陷，无法实现助燃蒸汽精准快速调控，造成放空火炬尾气超标排放或挥发性有机物直接泄漏等重大安全责任事故，不利于企业的水电能源节约和政府的污染排放管控。
              </p>
              <p>
                为加快改善水、电能源利用率、提升尾气燃尽率、切实推动环境保护与碳中和重大需求，结合视像感知识别技术与自主优化控制理论，突破主流工业废气监控模式，设计并发明了工业废气排放智能监控系统。
              </p>
              <p>
                针对废气遥测问题，首先利用大数据统计进行影像<span style="font-weight: bold;color: #409eff;">画质评价</span>，其次对于受损影像进行<span
                  style="font-weight: bold;color: #409eff;">复原增强</span>，然后使用领域知识迁移展开废气定位检测<span
                  style="font-weight: bold;color: #409eff;">建模</span>，最后实现<span
                  style="font-weight: bold;color: #409eff;">超标预警</span>。
              </p>
            </div>
          </el-col>
          <el-col :span="12">
            <!-- Image Carousel -->
            <el-carousel :interval="4000" arrow="always" height="300px">
              <el-carousel-item v-for="(item, index) in imageList" :key="index">
                <el-image :src="item" fit="contain"></el-image>
              </el-carousel-item>
            </el-carousel>
          </el-col>
        </el-row>
      </el-card>
    </el-row>
    <br />
    <br />
    <br />
    <el-row>
      <el-card shadow="hover">
        <div slot="header" class="card-header">系统运行流程</div>
        <div style="width: 100%">
          <!-- 内容部分 -->
          <el-row :gutter="20" class="content" type="flex" align="middle">
            <!-- 左侧图片 -->
            <el-col :sm="24" :md="12">
              <el-image :src="i14" fit="cover" class="process-image"></el-image>
            </el-col>

            <!-- 右侧文字介绍 -->
            <el-col :sm="24" :md="12">
              <div class="text-content">
                <p>
                  工业废气排放智能监控系统通过实时监测、数据采集与分析，实现对工业废气排放的全面管控，保障环境安全。
                </p>
                <el-timeline>
                  <el-timeline-item timestamp="步骤一" color="#0bbd87">
                    <div>
                      <img :src="i10" alt="数据采集" style="width: 100px; height: auto;" />
                      <p>数据采集：通过高清摄像头采集废气燃烧排放图像</p>
                    </div>
                  </el-timeline-item>
                  <el-timeline-item timestamp="步骤二" color="#e6a23c">
                    <div>
                      <img :src="i12" alt="画质评价及复原增强" style="width: 100px; height: auto;" />
                      <p>画质评价及复原增强：通过模型对图像进行画质评价及复原增强</p>
                    </div>
                  </el-timeline-item>
                  <el-timeline-item timestamp="步骤三" color="#f56c6c">
                    <div>
                      <img :src="i13" alt="废气定位检测建模" style="width: 100px; height: auto;" />
                      <p>废气定位检测：通过建立模型分析图像进行废气检测</p>
                    </div>
                  </el-timeline-item>
                  <el-timeline-item timestamp="步骤四" color="#409eff">
                    <div>
                      <img :src="i11" alt="智能分析与预警" style="width: 100px; height: auto;" />
                      <p>智能分析与预警：根据模型智能控制阀门开关并进行预警</p>
                    </div>
                  </el-timeline-item>
                </el-timeline>
              </div>
            </el-col>

          </el-row>
        </div>
      </el-card>
    </el-row>
    <br />
    <br />
    <br />
    <el-card shadow="hover">
      <div slot="header" class="card-header">系统特色</div>
      <el-row class="features-section">
        <el-col :span="8" v-for="(feature, index) in features" :key="index">
          <el-card shadow="always" class="feature-card">
            <img :src="feature.icon" class="feature-icon" alt="Feature Icon">
            <h3 class="feature-title">{{ feature.title }}</h3>
            <p class="feature-description">{{ feature.description }}</p>
          </el-card>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'Index',
  data() {
    return {
      i10: process.env.VUE_APP_BASE_API + '/profile/images/index/i10.png',
      i11: process.env.VUE_APP_BASE_API + '/profile/images/index/i11.png',
      i12: process.env.VUE_APP_BASE_API + '/profile/images/index/i12.png',
      i13: process.env.VUE_APP_BASE_API + '/profile/images/index/i13.png',
      i14: process.env.VUE_APP_BASE_API + '/profile/images/index/i14.gif',
      img: process.env.VUE_APP_BASE_API + '/profile/images/logo.png',
      url: process.env.VUE_APP_BASE_API + '/profile/images/index/i9.gif',
      imageList: [
        process.env.VUE_APP_BASE_API + '/profile/images/index/i1.png',
        process.env.VUE_APP_BASE_API + '/profile/images/index/i2.png',
        process.env.VUE_APP_BASE_API + '/profile/images/index/i3.png',
        process.env.VUE_APP_BASE_API + '/profile/images/index/i4.png',
        // process.env.VUE_APP_BASE_API + '/profile/images/index/i5.png',
      ],
      features: [
        {
          icon: process.env.VUE_APP_BASE_API + '/profile/images/index/i6.webp',
          title: '实时监控',
          description: '通过高精度传感器，实时监控废气排放情况。',
        },
        {
          icon: process.env.VUE_APP_BASE_API + '/profile/images/index/i8.webp',
          title: '智能预警',
          description: '超标排放时，系统自动发出预警，防止事故发生。',
        },
        {
          icon: process.env.VUE_APP_BASE_API + '/profile/images/index/i7.webp',
          title: '数据分析',
          description: '提供全面的数据分析报告，助力决策优化。',
        },
      ],
    }
  },
}
</script>

<style scoped>
/* Overall Container */
.app-container {
  padding: 20px;
}

/* Header Styles */
.header-row {
  margin-bottom: 30px;
}

.header-col {
  text-align: center;
}

.logo {
  width: 60px;
  height: 60px;
  vertical-align: middle;
}

.title {
  display: inline-block;
  vertical-align: middle;
  margin-left: 15px;
  font-size: 28px;
  font-weight: bold;
}

/* Card Styles */
.card-header {
  text-align: center;
  font-size: 24px;
  font-weight: bold;
}

.card-content {
  font-size: 16px;
  line-height: 1.8;
  text-align: justify;
}

p {
  margin-bottom: 15px;
}

/* Carousel Styles */

.el-carousel .el-carousel__container {
  border-radius: 10px;
  overflow: hidden;
}

.el-image {
  width: 100%;
  height: 100%;
}

/* Features Section */
.features-section {
  margin-top: 40px;
}

.section-title {
  text-align: center;
  font-size: 26px;
  font-weight: bold;
  margin-bottom: 30px;
}

.feature-card {
  text-align: center;
  padding: 20px;
}

.feature-icon {
  width: 80px;
  height: 80px;
  margin-bottom: 15px;
}

.feature-title {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 10px;
}

.feature-description {
  font-size: 14px;
  color: #666;
}


.content {
  margin-bottom: 60px;
}

.process-image {
  width: 100%;
  height: 100%;
  border-radius: 4px;
}
</style>
